import React, { useState, useEffect } from 'react';
import './ErrorToast.css';

/**
 * 错误提示弹窗组件
 * @param {string} message - 错误消息
 * @param {number} duration - 显示持续时间（毫秒），默认3000
 * @param {Function} onClose - 关闭回调
 */
const ErrorToast = ({ message, duration = 3000, onClose }) => {
  const [show, setShow] = useState(false);
  const [isFadingOut, setIsFadingOut] = useState(false);

  useEffect(() => {
    if (message) {
      setShow(true);
      setIsFadingOut(false);
      
      // 开始淡出
      const fadeOutTimer = setTimeout(() => {
        setIsFadingOut(true);
        // 淡出动画完成后隐藏
        setTimeout(() => {
          setShow(false);
          if (onClose) {
            onClose();
          }
        }, 300);
      }, duration);
      
      return () => clearTimeout(fadeOutTimer);
    } else {
      setShow(false);
      setIsFadingOut(false);
    }
  }, [message, duration, onClose]);

  if (!show || !message) {
    return null;
  }

  return (
    <div className={`error-toast ${isFadingOut ? 'fade-out' : ''}`}>
      <div className="error-toast__content">
        {message}
      </div>
    </div>
  );
};

export default ErrorToast;

